<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello, World</title>
        <link href="jquery-mobile/jquery.mobile-1.1.0.min.css" rel="stylesheet" type="text/css" />
        <link href="styles/main.css" rel="stylesheet" type="text/css" />

        <script src="cordova.js" type="text/javascript"></script>
        <script src="jquery-mobile/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="jquery-mobile/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="js/hello-world.js" type="text/javascript"></script>
    </head> 
    <body> 
        
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Hello, World!</h1>
            </div>
            <div data-role="content">
                <h1>Welcome to Icenium!</h1>
                <p>
                    Icenium&trade; enables you to build cross-platform device applications regardless of your 
                    development platform by combining the convenience of a local development toolset with the 
                    power and flexibility of the cloud.
                </p>
            </div>
            <div class="nav">
                <ul data-role="listview">
                    <li><a href="#page1" data-transition="slide">UI Interaction Example</a></li>
                    <li><a href="#page2" data-transition="slide">Geolocation Example</a></li>
                </ul>
            </div>
            <div data-role="footer" data-position="fixed" data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>
        </div>
        
        <!-- The following page demonstrates basic user interaction. -->
        <div data-role="page" id="page1" data-add-back-btn="true">
            <div data-role="header">
                <h1>Hello</h1>
            </div>
            <div data-role="content">
                <h1>Say Hello!</h1>
                <div id='helloWorldInput'>
                    <label for="txtName">Enter your name:</label>
                    <input type="text" id="txtName" value="" />
                </div>
                <div id='helloWorldText' style="display:block;"></div>
                <div align="center">
                    <div data-role="controlgroup" data-type="horizontal">
                        <button data-icon="delete" onClick="sayHelloReset();">Reset</button>
                        <button data-theme="a" onClick="sayHello();">Submit</button>
                    </div>
                </div>
            </div>
            <div data-role="footer" data-position="fixed"  data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>
        </div>
        
        <!-- The following page demonstrates how to access device sensors using Apache Callback (aka PhoneGap) -->
        <div data-role="page" id="page2" data-add-back-btn="true">
            <div data-role="header">
                <h1>Geolocation Example</h1>
            </div>
            <div data-role="content">
                <h1>My Location</h1>
                <div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
                <button data-icon="refresh" onClick="getLocation();">Refresh Location</button>
                <div id="map_canvas"></div>
            </div>
            <div data-role="footer" data-position="fixed" data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>
        </div>
    </body>
    </html>